<!DOCTYPE html>
<html lang="en">
  <body style="background-color: aqua">
    <img id="aa" />
    <script type="text/javascript">
      // aa();

      const hexToRgb = (color) => {
        const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        color = color.replace(shorthandRegex, function (m, r, g, b) {
          return r + r + g + g + b + b;
        });

        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
        return result
          ? {
              r: parseInt(result[1], 16),
              g: parseInt(result[2], 16),
              b: parseInt(result[3], 16),
            }
          : {
              r: 0,
              g: 0,
              b: 0,
            };
      };

      const createImage = ({ source, type = "img" }) => {
        const aa = new Promise((resolve, reject) => {
          const imgElement = new Image();
          if (type === "svg") {
            imgElement.src =
              "data:image/svg+xml," + unescape(encodeURIComponent(source)); //svg内容中可以有中文字符
            // imgElement.src = "data:image/svg+xml," + svg2; //svg内容中不能有中文字符
          } else {
            imgElement.src = source;
          }
          imgElement.onload = () => {
            resolve(imgElement);
          };
        });
        return aa;
      };

      const svgSetColor = async ({
        source,
        color = "#ff4f02",
      }) => {
        const imgElement = await createImage({ source, type:'svg' });

        const pro = new Promise((resolve, reject) => {
          const canvas = document.createElement("canvas");
          canvas.width = imgElement.width;
          canvas.height = imgElement.height;
          const ctx = canvas.getContext("2d");
          ctx.drawImage(imgElement, 0, 0, canvas.width, canvas.height);
          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          const data = imageData.data;
          const rgbColor = hexToRgb(color);
          for (let p = 0, len = data.length; p < len; p += 4) {
            if (data[p + 3] == 0) continue;
            data[p + 0] = rgbColor.r;
            data[p + 1] = rgbColor.g;
            data[p + 2] = rgbColor.b;
            data[p + 3] = 255;
          }
          ctx.putImageData(imageData, 0, 0);
          resolve(canvas.toDataURL());
        });
        return pro;
      };

      const s =
        '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4814" width="200" height="200"><path d="M0 278.698667L278.698667 0H182.101333L0 182.101333v96.597334zM0 543.232L543.232 0H446.634667L0 446.634667v96.597333zM841.898667 1024L1024 841.898667V745.301333L745.301333 1024h96.597334zM577.365333 1024L1024 577.365333V480.768L480.768 1024h96.597333zM312.832 1024L1024 312.832V216.234667L216.234667 1024h96.597333zM1024 0h-48.298667L0 975.701333V1024h48.298667L1024 48.298667V0zM0 807.765333L807.765333 0H711.168L0 711.168v96.597333z"  p-id="4815"></path></svg>';
      svgSetColor({ source: s, type: "svg", color: "#ccc" }).then((res) => {
        const imgElement2 = document.getElementById("aa");
        imgElement2.src = res;
      });
    </script>
  </body>
</html>
